/*původní styly*/

.center {
  margin: 10;
  margin-left: 25%;
  
  padding: auto;
}


img
{
    vertical-align:left;
}

.middle{
margin: 10;
margin-left: 48%; 
} 

font{
text-shadow: 1px 2px 3px #808080;
margin-top:500px; margin-right:8px; margin-bottom:100px; margin-left:18px
} 

.nadpis {background-color: silver}

/*původní styly konec*/

/*video na pozadí*/

#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

/*video na pozadí konec*/


/*tělo a nadpisy*/

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #A8DBA8;
}

h1 {
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  word-spacing: .8em;
}
h1 span:first-child {
  color: #af3817;
}
h1 span:last-child {
  color: #0b3fa1;
}

/*tělo a nadpisy*/


/*tlačítka*/

.gallery {
  --z: 20px;  /* control the zig-zag  */
  --s: 300px; /* control the size */
  --g: 5px;   /* control the gap */
  
  display: grid;
  gap: var(--g);
  width: calc(2*var(--s) + var(--g));
  grid-auto-flow: column;
}
.gallery > img {
  width: 0;
  min-width: calc(100% + var(--z)/2);
  height: var(--s);
  object-fit: cover;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  width: calc(var(--s)/2);
}
.gallery > img:first-child {
  place-self: start;
  
  --mask: 
    conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 
      50%/100% calc(2*var(--z)) repeat-y;
}
.gallery > img:last-child {
  place-self: end;

  --mask: 
    conic-gradient(from   45deg at left ,#0000,#000 1deg 89deg,#0000 90deg) 
      50% calc(50% - var(--z))/100% calc(2*var(--z)) repeat-y;
}

/*tlačítka konec*/